<template>
	<div class="app-container">
		<!-- 查询和其他操作 -->
		<div class="filter-container">
			<el-input v-model="listQuery.goodsName" clearable class="filter-item" style="width: 200px"
			          placeholder="请输入商品名"/>
			<el-input v-model="listQuery.id" clearable class="filter-item" style="width: 200px"
			          placeholder="请输入投标编号"/>
			<el-select v-model="listQuery.isBid" style="width: 200px" class="filter-item" placeholder="请选择投标状态">
				<el-option v-for="(key, value) in statusMap" :key="key" :label="key" :value="value"/>
			</el-select>
			<el-button v-permission="[1, 2]" class="filter-item" type="primary" icon="el-icon-search"
			           @click="handleFilter">查找
			</el-button>
		</div>

		<!-- 查询结果 -->
		<el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit
		          highlight-current-row>

			<el-table-column align="center" width="160" label="操作">
				<template slot-scope="scope">
					<el-button v-permission="[1, 2]" type="primary" size="mini"
					           @click="handleDetail(scope.row)">详情
					</el-button>
					<!--<el-button v-permission="[1, 2]" v-if="scope.row.isBid === 0" type="primary"-->
					<!--       size="mini" @click="handleDeliver(scope.row)">投递-->
					<!--</el-button>-->
				</template>
			</el-table-column>

			<el-table-column align="center" label="投标编号" prop="id"/>

			<el-table-column align="center" width="80" label="用户" prop="userName"/>

			<el-table-column align="center" width="120" label="投标状态" prop="isBid">
				<template slot-scope="scope">
					<el-tag>{{ scope.row.isBid | bidStatusFilter }}</el-tag>
				</template>
			</el-table-column>

			<el-table-column align="center" width="80" label="商品名称" prop="goodsName"/>

			<el-table-column align="center" width="80" label="数量" prop="num"/>

			<el-table-column align="center" label="创建时间" prop="createTime">
				<template slot-scope="scope">
					{{ scope.row.createTime | formatTime }}
				</template>
			</el-table-column>

			<el-table-column align="center" label="发货时间" prop="sendTime">
				<template slot-scope="scope">
					{{ scope.row.sendTime | formatTime }}
				</template>
			</el-table-column>

		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
		            @pagination="getList"/>

		<!-- 投标详情对话框 -->
		<el-dialog :visible.sync="bidDialogVisible" title="投标详情" width="800">
			<el-form :data="bidDetail" label-position="left">
				<el-form-item label="投标编号">
					<span>{{ bidDetail.id }}</span>
				</el-form-item>
				<el-form-item label="用户id">
					<span>{{ bidDetail.createPerson }}</span>
				</el-form-item>
				<el-form-item label="用户名">
					<span>{{ bidDetail.userName }}</span>
				</el-form-item>
				<el-form-item label="投标状态">
					<template>
						<el-tag>{{ bidDetail.isBid | bidStatusFilter }}</el-tag>
					</template>
				</el-form-item>
				<el-form-item label="用户备注">
					<span>{{ bidDetail.invoiceType }}</span>
				</el-form-item>
				<el-form-item label="收货信息">
					<span>（收货人）{{ bidDetail.userName }}</span>
					<span>（手机号）{{ bidDetail.phone }}</span>
					<span>（地址）{{ bidDetail.sendAddress }}</span>
				</el-form-item>
				<el-form-item label="投标信息">
					<span>（名称）{{ bidDetail.goodsName }}</span>
					<span>（规格）{{ bidDetail.specifications }}</span>
					<span>（商品数量）{{ bidDetail.num }}</span>
					<span>（生产商）{{ bidDetail.producer }}</span>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>


<script>
	import {
		listBid,
		shipBid,
		refundBid,
		detailBid
	} from '@/api/Bid'
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import checkPermission from '@/utils/permission' // 权限判断函数

	const statusMap = {
		0: '进行中',
		1: '已完成'
	}

	export default {
		name: 'Bid',
		components: {Pagination},
		filters: {
			bidStatusFilter(status) {
				return statusMap[status]
			}
		},
		data() {
			return {
				list: undefined,
				total: 0,
				listLoading: true,
				listQuery: {
					pageNum: 1,
					pageSize: 10,
					id: undefined,
					isBid: undefined,
					goodsName: undefined
				},
				statusMap,
				bidDialogVisible: false,
				bidDetail: {}
			}
		},
		created() {
			this.getList()
		},
		methods: {
			checkPermission,
			getList() {
				this.listLoading = true
				listBid(this.listQuery)
					.then(res => {
						this.list = res.data.records
						this.total = res.data.total
						this.listLoading = false
					})
					.catch(() => {
						this.list = []
						this.total = 0
						this.listLoading = false
					})
			},
			handleFilter() {
				this.listQuery.pageNum = 1
				this.getList()
			},
			handleDetail(row) {
				// detailBid(row.id).then(res => {
				// 	this.bidDetail = res.data
				// })
				this.bidDetail = row
				this.bidDialogVisible = true
			},
			handleDeliver(row) {
				// detailBid(row.id).then(res => {
				// 	this.bidDetail = res.data
				// })
				this.bidDetail = row
				this.bidDialogVisible = true
			}
		}
	}
</script>
<style lang="scss" scoped>
</style>
